// 学生签约行业分布柱状图的数据
var industry_x = [5.22, 20.98, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20, 36, 10, 10];
var industry_y = [
    '电力、热力、燃气及水生产和供应业',
    '交通运输、仓储和邮政业',
    '建筑业',
    '制造业',
    '电力、热力、燃气及水生产和供应业',
    '交通运输、仓储和邮政业',
    '建筑业',
    '制造业',
    '电力、热力、燃气及水生产和供应业',
    '交通运输、仓储和邮政业',
    '建筑业',
    '制造业',
    '电力、热力、燃气及水生产和供应业',
    '交通运输、仓储和邮政业',
    '建筑业',
    '制造业',
    '电力、热力、燃气及水生产和供应业',
    '交通运输、仓储和邮政业',
    '建筑业',
    '制造业',
    '交通运输、仓储和邮政业'
];

// 各学院毕业去向落实率柱状图的数据
var college_x = [5.22, 20.98, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20, 36, 10.08, 12.08];
var college_y = [
    '物理物理学院物理学院',
    '化学化学院',
    '生物学院',
    '人文文学院',
    '经管经管经管经管经管经管学院',
    '物理物理学院物理学院',
    '化学化学院',
    '生物学院',
    '人文文学院',
    '经管经管经管经管学院',
    '物理物理学院物理学院',
    '化学化学院',
    '生物学院',
    '人文文学院',
    '经管经管经管经管学院',
    '物理物理物理物理物理物理学院',
    '化学化学院',
    '生物学院',
    '人文文学院',
    '经管经管经管经管学院',
    '生物学院'
];

// 毕业去向类型分布饼图的数据
var direction_data = [
    {
        name: '数学学院',
        data: [
            {
                value: 20,
                name: '签就业协议形式就业'
            },
            {
                value: 23,
                name: '就业协议形式2就业'
            },
            {
                value: 48,
                name: '升学'
            },
            {
                value: 16,
                name: '升学2'
            },
            {
                value: 41,
                name: '自主创业'
            },
            {
                value: 36,
                name: '自主创业2'
            },
            {
                value: 41,
                name: '签劳动合同形式就业'
            },
            {
                value: 36,
                name: '签劳合同形式就业啦'
            },
            {
                value: 13,
                name: '国家基层项目'
            },
            {
                value: 26,
                name: '国家基层项目2'
            },
            {
                value: 33,
                name: '其他录用形式就业'
            },
            {
                value: 65,
                name: '其他录用形式就业2'
            },
            {
                value: 33,
                name: '国家基层项目3'
            },
            {
                value: 65,
                name: '国家基层项目4'
            }
        ]
    },
    {
        name: '计算机学院',
        data: [
            {
                value: 20,
                name: '签就业协议形式就业'
            },
            {
                value: 23,
                name: '签就业议形式2就业'
            },
        ]
    },
    {
        name: '外国语学院',
        data: [
            {
                value: 20,
                name: '签就业协议形式就业'
            },
            {
                value: 23,
                name: '签就业协议式2就业'
            },
        ]
    }
]
// 工作职位类别分布饼图的数据
var jobcategory_data = [
    {
        name: '数学学院',
        data: [
            {
                value: 20.99,
                name: '新闻出版和文化工作...'
            },
            {
                value: 23,
                name: '公务员2'
            },
            {
                value: 48,
                name: '科学研究人员'
            },
            {
                value: 16,
                name: '科学研究人员2'
            },
            {
                value: 41,
                name: '工程技术人员'
            },
            {
                value: 36,
                name: '工程技术人员2'
            },
            {
                value: 41,
                name: '农林牧渔农林牧渔'
            },
            {
                value: 36,
                name: '农林牧渔农林牧渔2'
            },
            {
                value: 13.99,
                name: '卫生专业技术卫生专...'
            },
            {
                value: 26,
                name: '卫6生专业技术2'
            },
            {
                value: 33,
                name: '经5济业务人员'
            },
            {
                value: 26,
                name: '卫4生专业技术2'
            },
            {
                value: 33,
                name: '经3济业务人员'
            },
            {
                value: 26,
                name: '卫2生专业技术2'
            },
            {
                value: 33,
                name: '经1济业务人员'
            },
            {
                value: 33,
                name: '经济8业务人员'
            },
            {
                value: 26,
                name: '卫生9专业技术2'
            },
            {
                value: 33,
                name: '经济0业务人员'
            }
            
            
        ]
    },
    {
        name: '计算机学院',
        data: [
            {
                value: 20,
                name: '公务员'
            },
            {
                value: 23,
                name: '公务员2'
            }
        ]
    },
    {
        name: '外国语学院',
        data: [
            {
                value: 20,
                name: '公务员'
            },
            {
                value: 23,
                name: '公务员2'
            }
        ]
    }
]

// 入职单位性质分布折线图的数据
var unit_data = [
    {
        name: '数学学院',
        data_x: [
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '医疗卫生',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党',
            '党政机关机关机关党政党'
        ],
        data_y: [150, 200, 180, 400, 300, 600, 250, 400, 370, 500, 700, 555, 666, 320, 400]
    },
    {
        name: '计算机学院',
        data_x: [
            '党政机关机关机关党政党',
            '医疗卫生',
            '党政党政党政党政'
        ],
        data_y: [150, 200, 180]
    },
    {
        name: '外国语学院',
        data_x: [
            '党政机关机关机关党政党',
            '医疗卫生',
            '党政党政党政党政'
        ],
        data_y: [150, 200, 180]
    }
]

var directionSwiper = new Swiper('#direction-swiper', {
    // 自动播放, 并且手动切换不影响自动播放
    autoplay: {
        disableOnInteraction: false
    },
    // 开启loop循环后，swiper会自动在最前面和最后面各加一个重复元素，比如1，2，3就会变成3，1，2，3，1，这样就实现了循环
    loop: true,
    speed: 2000
})

var jobcategorySwiper = new Swiper('#jobcategory-swiper', {
    // 自动播放, 并且手动切换不影响自动播放
    autoplay: {
        disableOnInteraction: false
    },
    loop: true,
    speed: 2000
})

var unitSwiper = new Swiper('#unit-swiper', {
    // 自动播放, 并且手动切换不影响自动播放
    autoplay: {
        disableOnInteraction: false
    },
    loop: true,
    speed: 2000
})

// 初始化两个柱状图
var industryEcharts = echarts.init(document.getElementById('industryEcharts'));
var collegeEcharts = echarts.init(document.getElementById('collegeEcharts'));

// 柱状图图表显示
setBarOption(industryEcharts, industry_x, industry_y)
setBarOption(collegeEcharts, college_x, college_y)

// 初始化毕业去向类型分布饼图
var direction_arr = [] // 用来存放毕业去向类型分布的所有饼图
var directionList = document.getElementsByClassName('directionEcharts');
console.log(directionList);
// 我们会绘制比实际数量多2个的饼图，用来实现swiper的loop循环的无缝切换
for (let i = 0; i < directionList.length; i++) {
    let directionEcharts = echarts.init(directionList[i]);
    if (i == 0) {
        // 最前面新增的饼图
        setPieOption(directionEcharts, direction_data[direction_data.length - 1].name, direction_data[direction_data.length - 1].data)
    } else if (i == directionList.length - 1) {
        // 最后面新增的饼图
        setPieOption(directionEcharts, direction_data[0].name, direction_data[0].data)
    } else {
        // 正常的饼图
        setPieOption(directionEcharts, direction_data[i - 1].name, direction_data[i - 1].data)
    }
    direction_arr.push(directionEcharts)
}

// 初始化工作职位类别分布饼图
var jobcategory_arr = []
var jobcategoryList = document.getElementsByClassName('jobcategoryEcharts');
// 我们会绘制比实际数量多2个的饼图，用来实现swiper的loop循环的无缝切换
for (let i = 0; i < jobcategoryList.length; i++) {
    let jobcategoryEcharts = echarts.init(jobcategoryList[i]);
    if (i == 0) {
        // 最前面新增的饼图
        setPieOption(jobcategoryEcharts, jobcategory_data[jobcategory_data.length - 1].name, jobcategory_data[jobcategory_data.length - 1].data)
    } else if (i == jobcategoryList.length - 1) {
        // 最后面新增的饼图
        setPieOption(jobcategoryEcharts, jobcategory_data[0].name, jobcategory_data[0].data)
    } else {
        // 正常的饼图
        setPieOption(jobcategoryEcharts, jobcategory_data[i - 1].name, jobcategory_data[i - 1].data)
    }
    jobcategory_arr.push(jobcategoryEcharts)
}

// 初始化入职单位性质分布饼图
var unit_arr = []
var unitList = document.getElementsByClassName('unitEcharts');
// 我们会绘制比实际数量多2个的图，用来实现swiper的loop循环的无缝切换
for (let i = 0; i < unitList.length; i++) {
    let unitEcharts = echarts.init(unitList[i]);
    if (i == 0) {
        // 最前面新增的图
        setLineOption(unitEcharts, unit_data[unit_data.length - 1].name, unit_data[unit_data.length - 1].data_x, unit_data[unit_data.length - 1].data_y)
    } else if (i == unitList.length - 1) {
        // 最后面新增的图
        setLineOption(unitEcharts, unit_data[0].name, unit_data[0].data_x, unit_data[0].data_y)
    } else {
        // 正常的图
        setLineOption(unitEcharts, unit_data[i - 1].name, unit_data[i - 1].data_x, unit_data[i - 1].data_y)
    }
    unit_arr.push(unitEcharts)
}

// 监听图表容器的大小并改变图表大小
window.addEventListener('resize', function () {
    // ***begin:这里重新设置图表配置是为了让fontSizeRem()生效
    setBarOption(industryEcharts, industry_x, industry_y)
    setBarOption(collegeEcharts, industry_x, industry_y)
    for (let i = 0; i < directionList.length; i++) {
        let directionEcharts = echarts.init(directionList[i]);
        if (i == 0) {
            // 最前面新增的饼图
            setPieOption(directionEcharts, direction_data[direction_data.length - 1].name, direction_data[direction_data.length - 1].data)
        } else if (i == directionList.length - 1) {
            // 最后面新增的饼图
            setPieOption(directionEcharts, direction_data[0].name, direction_data[0].data)
        } else {
            // 正常的饼图
            setPieOption(directionEcharts, direction_data[i - 1].name, direction_data[i - 1].data)
        }
    }
    for (let i = 0; i < jobcategoryList.length; i++) {
        let jobcategoryEcharts = echarts.init(jobcategoryList[i]);
        if (i == 0) {
            // 最前面新增的饼图
            setPieOption(jobcategoryEcharts, jobcategory_data[jobcategory_data.length - 1].name, jobcategory_data[jobcategory_data.length - 1].data)
        } else if (i == jobcategoryList.length - 1) {
            // 最后面新增的饼图
            setPieOption(jobcategoryEcharts, jobcategory_data[0].name, jobcategory_data[0].data)
        } else {
            // 正常的饼图
            setPieOption(jobcategoryEcharts, jobcategory_data[i - 1].name, jobcategory_data[i - 1].data)
        }
    }
    // ***end***
    industryEcharts.resize();
    collegeEcharts.resize();
    direction_arr.forEach(item => {
        item.resize();
    })
    jobcategory_arr.forEach(item => {
        item.resize();
    })
    unit_arr.forEach(item => {
        item.resize();
    })
});


// 柱状图图表配置函数
function setBarOption(barEcharts, dataX, dataY) {
    // 图表往右偏移量
    leftOffset = barEcharts == industryEcharts ? '45%' : '31%'
    var option = {
        grid: {
            // 图表偏移位置
            top: '3%',
            bottom: '3%',
            left: leftOffset, // 将图表往右偏移 
            right: '8%'
        },
        xAxis: {
            type: 'value',
            show: false, // 不显示竖条
        },
        yAxis: {
            type: 'category',
            data: dataY,
            axisLabel: {
                color: '#fff',
                fontSize: '0.15rem',
                // 竖轴上的字太多了，需要格式化
                formatter: function (value) {
                    if (barEcharts == collegeEcharts && value.length > 10) {
                        return value.substring(0, 10) + '...'; // 截取前10个字符并添加省略号  
                    } else {
                        return value; // 正常显示  
                    }
                }
            },
            // axisTick、axisLine不显示轴线和刻度
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        series: [
            {
                type: 'bar',
                data: dataX,
                barWidth: fontSizeRem(10), // 设置柱子宽度
                label: {
                    // 将数据显示在柱子右边
                    show: true,
                    position: 'right',
                    color: '#fff',
                    fontSize: '0.15rem',
                    formatter: function (obj) {
                        return obj.data + '%'
                    }
                },
                itemStyle: {
                    // a,b,c,d:取值 0|1，代表右下左上四个线性渐变的方向 比如：1，0，0，0  代表颜色从左至右渐变
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        { offset: 0, color: '#01F3FF' },
                        { offset: 0.5, color: '#31BFFF' },
                        { offset: 1, color: '#8924FF' }
                    ]),
                    borderRadius: 5, // 设置柱子边框圆角为5像素  
                },
                // 设置柱子背景色
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(255,255,255,0.16)'
                },
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    barEcharts.setOption(option);
}

// 饼图图表配置函数
function setPieOption(pieEcharts, text, data) {
    let gap = 0
    // 根据不同数据量，设置图例之间间隔，才能让每个数据完整显示
    if(data.length > 16) {
        gap = fontSizeRem(5) 
    } else if(data.length > 14) {
        gap = fontSizeRem(8) 
    } else {
        gap = fontSizeRem(10) 
    }
    var option = {
        title: {
            text: text,
            color: '#19EAFE',
            // 设置标题位置
            left: '5%',
            top: '5%',
            textStyle: {
                // 设置标题字体颜色
                color: '#19EAFE',
                fontSize: '0.1875rem',
            }
        },
        legend: {
            itemGap: gap,  // 图例每项之间的间隔  
            height: fontSizeRem(155),
            icon: 'circle', // 图例形状为圆形
            itemWidth: fontSizeRem(12), // 设置图例图形的大小
            orient: 'vertical', // 图例为垂直排列
            // 图例位置
            top: '4.5%',
            left: '38%',
            textStyle: {
                color: '#fff',
                fontSize: '0.125rem',
            },
            formatter: function (name) {
                // 获取饼图数据
                var data = option.series[0].data; 
                for (var i = 0; i < data.length; i++) {  
                    if (data[i].name === name) {  
                        tarValue = data[i].value;  
                        break;  
                    }  
                } 
                let newName = ''
                if (name.length > 9) {
                    newName = name.substring(0, 8) + '...'; // 截取前8个字符并添加省略号  
                } else {
                    newName =  name; // 正常显示  
                }
                return newName + ' ' + tarValue + '%'
            }
        },
        series: [
            {
                type: 'pie',
                data: data,
                center: ['20%', '55%'], // 设置饼图圆心位置
                radius: ['40%', '70%'], // 设置饼图为圆环
                // 圆环上不显示数据
                label: {
                    show: false
                },
            }
        ]
    }
    pieEcharts.setOption(option);
}

// 折线图图表配置函数
function setLineOption(lineEcharts, text, dataX, dataY) {
    var option = {
        title: {
            text: text,
            color: '#19EAFE',
            // 设置标题位置
            left: '2%',
            top: '5%',
            textStyle: {
                // 设置标题字体颜色
                color: '#19EAFE',
                fontSize: '0.1875rem',
            }
        },
        grid: {
            // 图表偏移位置
            top: '20%',
            bottom: '30%',
            left: '6%', // 将图表往右偏移 
            right: '3%'
        },
        xAxis: {
            type: 'category',
            data: dataX,
            axisLabel: {
                color: '#fff',
                fontSize: '0.15rem',
                // 横轴上的字太多了，需要格式化
                formatter: function (params) {
                    var newParamsName = ''
                    var paramsNameNumber = params.length
                    var provideNumber = 3 //一行显示几个字
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = ''
                            var start = p * provideNumber
                            var end = start + provideNumber
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber)
                            } else {
                                tempStr = params.substring(start, end) + '\n'
                            }
                            newParamsName += tempStr
                        }
                    } else {
                        newParamsName = params
                    }
                    return newParamsName
                }
            },
            // axisTick不显示刻度
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#fff',
                fontSize: '0.15rem'
            },
            // y轴分割线的颜色样式
            splitLine: {
                lineStyle: {
                    color: "rgba(59, 80, 135, 1)"
                }
            }
        },
        series: [
            {
                data: dataY,
                type: 'line',
                lineStyle: {
                    color: '#19EAFE' // 设置折线颜色  
                },
                symbol: 'circle', // 设置小点形状为圆形  
                symbolSize: '10', // 设置小点大小为5像素  
                itemStyle: {
                    color: '#19eafe' // 设置小点颜色为绿色  
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    lineEcharts.setOption(option);
}

// 在echarts表格配置里如果使用rem单位失效，我们可以使用这个函数
function fontSizeRem(size) {
    const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = clientWidth / 1920;//尺寸大小
    return size * fontSize;
}
